import React from 'react'
import { Table, Statistic } from 'antd'
import './detailsModal.scss'
import { http } from '@/lib';
import apis from '@/apis/CostManage';
import dayjs from 'dayjs';

//接口字段映射
const fieldMap = {
  /**
   * 订单使用明细
   */
  //订单编号
  no: "SalesOrderHeadNumber",
  //SAP订单号
  sapNo: "SalesOrderErpNumber",
  //订单行项目
  items: "SalesOrderItemNumber",
  //金额
  amount: "Money",
  //状态
  status: "StatusName",
  //操作时间
  time: "CreateTime",

  /**
   * 转移申请单明细
   */
  //转移申请单号
  transferNo: "Number",
  //方式
  type: "Type",

  /**
   * 保证金返还使用明细
   */
  //保证金凭证编号
  marginNo: "VoucherCode",
  //凭证生成时间
  addTime: "AddTime",

  /**
   * 冻结日志
   */
  //原因
  reason: "Reason",
  //类型
  typesOf: "TypeName"
}

export default class DetailsModal extends React.Component<{ propsId: any, dealerCode: string }> {

  state = {
    //冻结日志
    FreezeCost: [],
    //转移申请单明细
    TransferCost: [],
    //订单使用明细
    UsedOrderCost: [],
    //保证金返还使用明细
    MarginBackCost: [],
    isLoading: false
  }

  componentDidMount = async () => {
    this.setState({ isLoading: true })
    await http.get(apis.getFundsListDetailsL, { params: { ExpenseId: this.props.propsId, dealerCode: this.props.dealerCode } }).then(res => {
      this.setState({ isLoading: false })
      const { FreezeCost, TransferCost, UsedOrderCost, MarginBackCost } = res?.data
      this.setState({ FreezeCost, TransferCost, UsedOrderCost, MarginBackCost })
    }).catch(error => {
      this.setState({ isLoading: false })
    })
  }

  render() {
    const { isLoading } = this.state
    return <div className="cost-list-details-model-box">
      <div className="title">订单使用明细</div>
      <Table
        loading={isLoading}
        rowKey={(record, index) => index + ""}
        dataSource={this.state.UsedOrderCost}
        pagination={false}
        columns={[
          {
            dataIndex: fieldMap.no,
            title: "订单编号",
            width: 100,
          },
          {
            dataIndex: fieldMap.sapNo,
            title: "SAP订单号",
            width: 160,
          },
          {
            dataIndex: fieldMap.items,
            title: "订单行项目",
            width: 100,
          },
          {
            dataIndex: fieldMap.amount,
            title: "金额",
            align: 'right',
            width: 120,
            render: (text) => (text || text == 0) && <Statistic value={text} precision={2} />
          },
          {
            dataIndex: fieldMap.status,
            title: "状态"
          },
          {
            dataIndex: fieldMap.time,
            title: "操作时间",
            render: (text) => text && dayjs(text).format('YYYY-MM-DD HH:mm:ss')
          }
        ]}
      />
      <div className="title">转移申请单明细</div>
      <Table
        loading={isLoading}
        rowKey={(record, index) => index + ""}
        dataSource={this.state.TransferCost}
        pagination={false}
        columns={[
          {
            dataIndex: fieldMap.transferNo,
            title: "转移申请单号",
            width: 360,
          },
          {
            dataIndex: fieldMap.amount,
            title: "金额",
            align: 'right',
            width: 120,
            render: (text) => (text || text == 0) && <Statistic value={text} precision={2} />
          },
          {
            dataIndex: fieldMap.status,
            title: "状态"
          },
          {
            dataIndex: fieldMap.type,
            title: "方式"
          }
        ]}
      />
      <div className="title">保证金返还使用明细</div>
      <Table
        loading={isLoading}
        rowKey={(record, index) => index + ""}
        dataSource={this.state.MarginBackCost}
        pagination={false}
        columns={[
          {
            dataIndex: fieldMap.marginNo,
            title: "保证金凭证编号",
            width: 360,
          },
          {
            dataIndex: fieldMap.amount,
            title: "金额",
            align: 'right',
            width: 120,
            render: (text) => (text || text == 0) && <Statistic value={text} precision={2} />
          },
          {
            dataIndex: fieldMap.addTime,
            title: "操作时间",
            render: (text) => text && dayjs(text).format('YYYY-MM-DD HH:mm:ss')
          }
        ]}
      />
      <div className="title">冻结日志</div>
      <Table
        loading={isLoading}
        rowKey={(record, index) => index + ""}
        dataSource={this.state.FreezeCost}
        pagination={false}
        columns={[
          {
            dataIndex: fieldMap.typesOf,
            title: "类型",
            width: 360,
          },
          {
            dataIndex: fieldMap.amount,
            title: "金额",
            align: 'right',
            width: 120,
            render: (text) => (text || text == 0) && <Statistic value={text} precision={2} />
          },
          {
            dataIndex: fieldMap.addTime,
            title: "操作时间",
            render: (text) => text && dayjs(text).format('YYYY-MM-DD HH:mm:ss')
          },
          {
            dataIndex: fieldMap.reason,
            title: "原因"
          }
        ]}
      />
    </div>
  }
}